<!DOCTYPE html>
<html lang="en">
<link>
    <meta charset="UTF-8">
    <title>OSS阿里云</title>

    <!-- 引入样式 -->
    <link rel="icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="../css/elementui.css"/>
    <script src="../js/vue.js"></script>
    <script src="../js/elementui.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/util.js"></script>
    <link rel="stylesheet" href="../css/style.css">

    <!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 70px;
            line-height: 150px;
            text-align: center;
        }
        .avatar {
            width: 150px;
            height: 70px;
            display: block;
        }
    </style>

<body>

    <div id="app">

        <el-upload
                class="avatar-uploader"
                action="/upload/zhaoyu2.do?yuchen=zhaoyu"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
            <img v-if="tp" :src="tp" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

    </div>

<script>
    new Vue({
        el: "#app",
        data:{
            tp: ''
        },
        created(){
        },
        methods:{
            handleAvatarSuccess(res, file){
                console.log(res);
                console.log(file);
                this.tp = file.response;
            },
            beforeAvatarUpload(file){
                console.log(file);
                if(file.size > 1024 * 1024 * 10){
                    return alert("文件太大");
                }
            },
            // 限制图片格式为JPG格式！
            /* beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            } */
        }
    })
</script>

</body>
</html>